<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul id="menu">
    <li>鱼香 <button onclick="del(event)">删除</button></li>
    <li>鱼香 <button onclick="del(event)">删除</button></li>
  </ul>
  <input type="text" id="in"> <button onclick="add()">添加按钮</button>
  <script>
    let del = function () {
      // event.target 代表当前触发事件的节点
      event.target.parentNode.remove()
    }
    function add() {
      // 创建li节点
      let li = document.createElement("li");
      // 获取input的节点
      let input = document.querySelector("#in")
      // 创建li的文本节点
      let li_val = document.createTextNode(input.value)
      // 创建btn 节点
      let btn = document.createElement("button");
      // 创建btn的文本节点
      let btn_val = document.createTextNode("删除")
      // 放进btn文本
      btn.appendChild(btn_val);
      // 对btn节点绑定事件
      btn.addEventListener("click", function (event) {
        // event.target 代表当前触发事件的节点
        event.target.parentNode.remove()
      })
      // li放进文本,放进
      li.appendChild(li_val);
      // li放进文本,btn 按钮
      li.appendChild(btn);
      // 获取ul节点
      let ul = document.querySelector("ul")
      // 放进li
      ul.appendChild(li)
      // 将输入框的值置空
      input.value = ""
    }
  </script>
</body>

</html>